<template>
	<view class="page">
		<fu-custom bgColor="bg-white" :isBack="true" :isBottom="true">
			<block slot="content">申请补仓</block>
		</fu-custom>
		<view class="goods-wrap bg-white margin-bottom-sm">
			<view class="flex ">
				<view class="img-200 overHidden relative">
					<fu-image :src="refundInfo.thumb" mode="aspectFill"></fu-image>
					<view class="box-kong padding-lr-16 padding-tb-4 text-white text-sm" v-if="refundInfo.port_name">
							{{refundInfo.port_name}}
					</view>
				</view>
				<view class="goods-info margin-left-sm">
					<view>
						<view class="text-df text-333 text-cut-2 text-weight-500">{{ refundInfo.name || '' }}
						</view>
						<view class="text-sm text-999  margin-top-sm">
							商品货号：{{ refundInfo.sn }}
						</view>
					</view>
					<view class="flex justify-between ">
						<text class="text-df text-prices">¥{{ refundInfo.shop_price || '' }}</text>
						<text class="text-999 text-sm">销量{{refundInfo.sales_sum||0}}</text>
						<text class="text-sm">库存{{refundInfo.stock||0}}</text>
					</view>
				</view>
			</view>
		</view>

		<view class="after-item-wrap bg-white">
			<view class="after-item flex justify-between align-center" >
				<view class="after_left text-111 text-lg text-weight-400">
					补仓数量
				</view>
				<view class="after_right text-bf  text-lg">
					<uni-number-box :value="1" :min="1" :max="max" @change="setnumber" :step="1">
					</uni-number-box>
				</view>
			</view>
			<view class="after-item flex justify-between align-center" >
				<view class="after_left text-111 text-lg text-weight-400">				所属仓库				</view>
				<view class="after_right   text-lg">{{storeHouseInfo.name}}				</view>
			</view>
			<view class="after-item flex justify-between align-center" >
				<view class="after_left text-111 text-lg text-weight-400">				仓库地址				</view>
				<view class="after_right   text-lg">{{storeHouseInfo.province}}-{{storeHouseInfo.city}}-{{storeHouseInfo.district}}-{{storeHouseInfo.address}}	</view>
			</view>
			
		</view>
		
		<view class="ben-btn submit-btn margin-lr radius-100" @click.stop="handleSubmit">确认补仓</view>
		<fu-notwork></fu-notwork>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				sku_id: '', // 商品规格
				imgWechatUrl: this.imgWechatUrl,
				min:1,
				max:10000,
				number:1,//
				order_sn: null, // 订单编号
				num: 0, // 商品数量
				images: [],				
			
				refundInfo: '',
				select_reason: 0,
				images: [],
				refund_content: '', // 退款说明
				visible: false,
				express_price: 0,
				isLoading: false, // 防连点
				storeHouseInfo: '', //仓库信息
			};
		},
		onLoad(options) {
			this.setNavigationBarTitle(this.i18n['申请售后']);
			this.refundInfo=JSON.parse(options.data)
			this.storeHouseInfo = uni.getStorageSync('storehouseInfo')
			
			this.getData();
		},
		methods: {
			// 修改数量
			setnumber(num) {
			  this.number = num;
			},
			/**
			 * @event
			 * @description 所在地的选择弹窗显示
			 */
			toggleTab(ref) {
				this.$refs[ref].show();
			},
			/**
			 * @event
			 * @description 所在地选择事件
			 * @param {Object} result - 用户所在地弹窗选择的值
			 */
			onConfirm(result, type) {
				console.log(result, type);

				if (type == 'selector') {
					let index = this.staicon.findIndex(item => item.id == result.obj.id);
					this.statindex = index;
				}
				if (type == 'reason') {
					let index = this.refundInfo.refund_reason.findIndex(item => item.id == result.obj.id);
					this.select_reason = index;
				}

			},
			//获取售后信息
			getData() {
				let data = {
					order_sn: this.order_sn,
					goods_id: this.goods_id,
					sku_id: this.sku_id,
					num: this.num
				};
				this.$api.post(global.apiUrls.postGetRefundMoney, data).then(res => {
				
					if (res.data.code == 1) {
						this.refundInfo = res.data.data;
					}
				});
			},
			handleImageUpload(e) {
				this.images = e;
			},
			// 提交
			handleSubmit() {
				if (this.isLoading) return;
				uni.hideKeyboard();
				let params=[{
					goods_id:this.refundInfo.id,
					num:this.number
				}]
				
				let data={
					params:JSON.stringify(params),
					warehouse_id:this.storeHouseInfo&&this.storeHouseInfo.id
				}
				this.isLoading = true;
				this.$api.post('/v1/63e4c3f310a68', data).then(res => {
						if (res.data.code == 1) {
							this.$message.info("补仓申请已提交");
							// 通知列表页面更新数据
							uni.$emit('addGoodsSuccess');
							setTimeout(() => {
								this.isLoading = false;
								uni.navigateBack();
							}, 800);
						} else {
							this.isLoading = false;
							this.$message.info(res.data.msg);
						}
					})
					.catch(err => {
						this.isLoading = false;
						console.log('err: ' + JSON.stringify(err));
					});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.page {
		min-height: 100vh;
		padding-bottom: 100rpx;
		padding-bottom: calc(100rpx + constant(safe-area-inset-bottom));
		padding-bottom: calc(100rpx + env(safe-area-inset-bottom));
	}

	.goods-wrap {
		padding: 24rpx 24rpx 34rpx;
	}

	.margin-t-8 {
		margin-top: 8rpx;
	}

	.padding-b-60 {
		padding-bottom: 60rpx;
	}

	.text-111 {
		color: #111111;
	}

	.text-bf {
		color: #bfbfbf;
	}

	.line-20 {
		height: 20rpx;
		width: 100%;
		background: #F8F8F8;
	}

	.after-item-wrap {
		padding: 16rpx 24rpx 32rpx;

		.after-item {
			height: 78rpx;

			&.money {
				position: relative;
				height: 122rpx;
				padding-bottom: 44rpx;

				.tips {
					position: absolute;
					left: 0;
					bottom: 20rpx;
				}
			}

		}
	}


	.submit-btn {
		position: fixed;
		bottom: 80rpx;
		bottom: calc(80rpx + constant(safe-area-inset-bottom));
		bottom: calc(80rpx + env(safe-area-inset-bottom));
		left: 0rpx;
		width: 92%;
		height: 90rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #ffffff;
		background: $bgtheme;
		font-size: 32rpx;
		font-weight: 500;
	}

	.wen {
		width: 702rpx;
		height: 272rpx;
		// border: 1rpx solid #e8e8e8;
		margin-top: 20rpx;
		padding: 24rpx;
		font-size: 28rpx;
		font-weight: 400;
		background: #F8F8F8;
		;
		border-radius: 16rpx;
		position: relative;

		textarea {
			width: 100%;
			height: 85%;
		}

		.tips {
			position: absolute;
			right: 24rpx;
			bottom: 24rpx;
		}
	}

	.img-200 {
		width: 200rpx;
		height: 200rpx;
		border-radius: 16rpx;
	}

	.goods-info {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: flex-start;
		overflow: hidden;

		&>view {
			width: 100%;
		}
	}

	/deep/ .sex-wrap .w-picker-view {
		height: 228rpx;
	}

	/deep/ .w-picker-item {
		position: relative;

		// height: 108rpx!important;
		// line-height: 108rpx!important;
		&::before {
			content: '';
			width: 100%;
			height: 1px;
			background: #eee;
			transform: scaleY(0.5);
			position: absolute;
			top: 0;
			left: 0;
		}

		&::after {
			content: '';
			width: 100%;
			height: 1px;
			background: #eee;
			transform: scaleY(0.5);
			position: absolute;
			bottom: 0;
			left: 0;
		}
	}
	.box-kong {
		position: absolute;
		border-radius: 16rpx 0 16rpx 0;
		left: 0;
		top: 0;
		z-index: 99;
		background: rgba(0, 0, 0, 0.6);
	}
</style>
